import React, { useState } from 'react';
import './App.css';
import FetchAPI from './utils/FetchAPI';
import md5 from 'blueimp-md5';



function App() {

  const [orgList, setOrgList] = useState({});
  const [loginModel, setLoginModel] = useState({});
  const [empList, setEmpList] = useState([]);
  const [empListFilter, setEmpListFilter] = useState([]);
  const [empModel, setEmpModel] = useState({});

  const getOrgList = () => {
    setOrgList({});
    FetchAPI.getOrg().then(result => {
      console.log(result);
      setOrgList(result)
    });
  }
  const doLogin = (param) => {
    FetchAPI.login({ ...param, userPwd: md5(param.userPwd) })
      .then(result => {
        console.log('result', result);

        if (result && result.State === '1') {
          alert('登录成功');
        }

      });
  }
  const getEmpList = () => {
    let filter = [];
    if (empListFilter.emp_no) {
      filter.push({ field: 'emp_no', opr: 'like', v: empListFilter.emp_no });
    }
    if (empListFilter.emp_nam) {
      filter.push({ field: 'emp_nam', opr: 'like', v: empListFilter.emp_nam });
    }
    if (empListFilter.dept_name) {
      filter.push({ field: 'dept_name', opr: 'like', v: empListFilter.dept_name });
    }
    FetchAPI.get('/api/BillView/GetBillList', { funId: '27e6e286-9abd-4e9a-9f29-c0c8d25c4551', filter: JSON.stringify(filter) })
      .then(result => {
        if (result && result.data) {
          setEmpList(result.data || []);
        }
        else {
          alert(result?.failmsg || '获取失败');
        }
      });
  }
  const addEmp = () => {
    if (!empModel.emp_no || !empModel.emp_nam || !empModel.Dept_No) {
      alert('编号、名称、部门不能为空');
      return;
    }
    FetchAPI.post('/api/HR_Emp/Post', empModel)
      .then(result => {
        if (result && result.success) {
          alert('添加成功');
        }
        else {
          alert('添加失败:' + result?.failmsg);
        }
      });
  }

  return (
    <div className="App">
      <header className="App-header">
        <p>
          B9 API 调用示例
        </p>
      </header>
      <div className="App-content">
        <label>请输入ERP地址:</label>
        <input type="text" placeholder="如:192.168.1.1:8081" onChange={e => {
          FetchAPI.host = e.target.value
          if (e.target.value.indexOf('//') < 0) {
            FetchAPI.host = '//' + FetchAPI.host;
          }
        }}></input>

        <p>运行以下操作时，请打开F12，关注Console、Network，随时调试</p>
        <ul>
          <li className="orglist">
            <p>机构列表</p>
            <button onClick={getOrgList} >获取</button><label>{orgList.co_name ? ('✔' + orgList.co_name) : ''}</label>
          </li>
          <li className="login">
            <p>登录</p>
            <input type="text" placeholder="用户名" onChange={e => setLoginModel({ ...loginModel, userName: e.target.value })}></input>
            <input type="password" placeholder="密码" onChange={e => setLoginModel({ ...loginModel, userPwd: e.target.value })}></input>
            <input type="text" placeholder="安全码" onChange={e => setLoginModel({ ...loginModel, securecode: e.target.value })} style={{ width: 60 }}></input>
            <button onClick={e => doLogin(loginModel)} >登录</button>
          </li>
          <li className="emplist">
            <p>员工</p>
            <div className="filter">
              <label>过滤：</label>
              <input type="text" placeholder="员工编号" onChange={e => setEmpListFilter({ ...empListFilter, emp_no: e.target.value })}></input>
              <input type="text" placeholder="名称" onChange={e => setEmpListFilter({ ...empListFilter, emp_nam: e.target.value })}></input>
              <input type="text" placeholder="部门" onChange={e => setEmpListFilter({ ...empListFilter, dept_name: e.target.value })}></input>
              <button onClick={getEmpList} >获取员工</button>
            </div>
            <div className="table-container">
              <table>
                <thead>
                  <tr>
                    <th>编号</th><th>姓名</th><th>部门编号</th><th>部门名称</th>
                  </tr>
                </thead>
                <tbody>
                  {
                    empList.map(x =>
                      <tr key={x.emp_no}>
                        <td>{x.emp_no}</td>
                        <td>{x.emp_nam}</td>
                        <td>{x.Dept_No}</td>
                        <td>{x.dept_name}</td>
                      </tr>
                    )
                  }
                </tbody>
              </table>
            </div>
            <div className="add-model">
              <div><label>新增员工：</label></div>
              <div><input type="text" placeholder="员工编号" onChange={e => setEmpModel({ ...empModel, emp_no: e.target.value })}></input></div>
              <div><input type="text" placeholder="名称" onChange={e => setEmpModel({ ...empModel, emp_nam: e.target.value })}></input></div>
              <div><input type="text" placeholder="部门编号" onChange={e => setEmpModel({ ...empModel, Dept_No: e.target.value })}></input></div>
              <div><button onClick={addEmp} >确定</button> </div>
            </div>
          </li>
        </ul>

      </div>
    </div>
  );
}

export default App;
